<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change',
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change',
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change',
            },
          ],
        }"
      >
        <a-row :gutter="[16, 16]" type="flex" justify="end">
          <a-col :md="6" :sm="8">
            <a-form-model-item prop="name" label="应用名称">
              <a-input autocomplete="off" v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-model-item prop="datacenterId" label="数据中心">
              <a-select
                :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
                v-model="form.datacenterId">
                <a-select-option v-for="d in datacenterList" :key="d.id">
                  {{ d.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col :md="12" :sm="24">
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
                style="margin-left: 21px"
              >
                查询
              </a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >
                重置
              </a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      ref="table"
      rowKey="appId"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" icon="edit" size="small" @click="handleUpdate(record)">设置</a-button>
      </span>
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span slot="sceneCol" slot-scope="text, record">
        {{
          sceneCnMap[record.sceneChoose] ||
          sceneCnMap[record.sceneSuggest] ||
          ""
        }}
      </span>
    </a-table>
    <update-modal ref="updateModal" @ok="loadData"></update-modal>
  </a-card>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";
import UpdateModal from "./modules/UpdateModal";

export default {
  name: "F020102",
  mixins: [GwListMixin],
  components: {
    UpdateModal,
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "应用名称",
          dataIndex: "appName",
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
        },
        {
          title: "应用场景",
          dataIndex: "sceneChoose",
          scopedSlots: { customRender: "sceneCol" },
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      datacenterList: [],
      url: {
        list: "/profile/pageScene",
      },
      form: {
        name: "",
        datacenterId: "",
      },
      sceneCnMap: {
        OFFLINE: "离线型",
        REALTIME: "实时型",
        SEQUENTIAL: "时序型",
      },
    };
  },
  mounted() {
    this.loadDatacenterList();
    this.loadData();
  },
  methods: {
    loadDatacenterList() {
      gPostAction("/asset/pageDatacenter", { pageSize: 99 }).then((res) => {
        this.datacenterList = res.data.list;
        this.datacenterList.unshift({id:'',name:'全部'});
        if (this.datacenterList.length) {
          this.datacenterId = this.datacenterList[0].id;
        }
      });
    },
    sortRender(t, r, index) {
      return parseInt(index) + 1;
    },
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.gQueryParam.appName = this.form.name;
        this.gQueryParam.datacenterId = this.form.datacenterId;
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.gDataSource = data.list;
            this.gPagination.total = data.totalCount;
          }
        });
      });
    },
    handleUpdate(data) {
      this.$refs.updateModal.update(data);
    },
    resetSearchForm() {
      this.$refs.formModel.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
